<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
            <el-form-item label="供应商名称" prop="supplierName">
                <el-input v-model="queryParams.supplierName" placeholder="请输入供应商名称" clearable />
            </el-form-item>
            <el-form-item label="供应商编码" prop="supplierCode">
                <el-input v-model="queryParams.supplierCode" placeholder="请输入供应商编码" clearable />
            </el-form-item>
            <!-- <el-form-item label="地址" prop="address">
                <el-input v-model="queryParams.address" placeholder="请输入地址" clearable @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <el-form-item label="联系人" prop="contacts">
                <el-input v-model="queryParams.contacts" placeholder="请输入联系人" clearable />
            </el-form-item>
            <el-form-item label="联系电话" prop="contactsPhone">
                <el-input v-model="queryParams.contactsPhone" placeholder="请输入联系电话" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['system:supplierInfo:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['systemSetup:manufacturer:remove']">删除</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="postList" border @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <!-- <el-table-column label="主键ID" align="center" prop="id" /> -->
            <el-table-column label="供应商名称" align="center" prop="supplierName" />
            <el-table-column label="供应商编码" align="center" prop="supplierCode" :show-overflow-tooltip="true" />
            <el-table-column label="开通民用气表" align="center" prop="civilUseStatus">
                <template slot-scope="scope">
                    <span v-if="scope.row.civilUseStatus == 1">开通</span>
                    <span v-if="scope.row.civilUseStatus == 0">未开通</span>
                </template>
            </el-table-column>
            <el-table-column label="开通工业气表" align="center" prop="industryStatus">
                <template slot-scope="scope">
                    <span v-if="scope.row.industryStatus == 1">开通</span>
                    <span v-if="scope.row.industryStatus == 0">未开通</span>
                </template>
            </el-table-column>
            <el-table-column label="地址" align="center" prop="address" />
            <el-table-column label="联系人" align="center" prop="contacts" />
            <el-table-column label="联系电话" align="center" prop="contactsPhone" />
            <el-table-column label="供应商状态" align="center" prop="supplierStatus">
                <template slot-scope="scope">
                    <span v-if="scope.row.supplierStatus == 1">启用</span>
                    <span v-if="scope.row.supplierStatus == 0">禁用</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:supplierInfo:edit']">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['system:supplierInfo:remove']">删除</el-button>
                    <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
                        v-hasPermi="['system:supplierInfo:getSupplierKey']">接入管理</el-button>
                    <el-button size="mini" type="text" icon="el-icon-video-play" @click="startView(scope.row)"
                        v-hasPermi="['system:supplierInfo:enable']" v-if="scope.row.supplierStatus == '0'">启用</el-button>
                    <el-button size="mini" type="text" icon="el-icon-video-pause" @click="closeView(scope.row)"
                        v-hasPermi="['system:supplierInfo:disable']" v-if="scope.row.supplierStatus == '1'">停用</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <!-- 添加或修改岗位对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false">
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
                <el-row :gutter="10" class="mb8">
                    <el-col :span="12">
                        <el-form-item label="供应商名称" prop="supplierName" required>
                            <el-input v-model="form.supplierName" placeholder="请输入供应商名称" />
                        </el-form-item>
                    </el-col>


                    <el-col :span="12">
                        <el-form-item label="联系人" prop="contacts" required>
                            <el-input v-model="form.contacts" placeholder="请输入联系人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="contactsPhone" required>
                            <el-input v-model="form.contactsPhone" placeholder="请输入联系电话" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="地址" prop="address">
                            <el-input v-model="form.address" placeholder="请输入地址" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开通民用气表" prop="civilUseStatus" required>
                            <el-radio v-model="form.civilUseStatus" :label="1">开通</el-radio>
                            <el-radio v-model="form.civilUseStatus" :label="0">关闭</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开通工业气表" prop="industryStatus" required>
                            <el-radio v-model="form.industryStatus" :label="1">开通</el-radio>
                            <el-radio v-model="form.industryStatus" :label="0">关闭</el-radio>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 私钥弹框 -->
        <el-dialog title="接入管理" :visible.sync="dialogTableVisible" :close-on-click-modal="false">
            <el-form label-width="140px" :model="form1" ref="formClear">
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="安全设置" name="1">
                        <el-row :gutter="10" class="mb8">
                            <el-col :span="24">
                                <el-form-item label="公钥" prop="publicKey">
                                    <el-input type="textarea" placeholder="请输入内容" v-model="form1.publicKey" show-word-limit
                                        disabled>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="私钥" prop="supplierPrivateKey">
                                    <el-input type="textarea" placeholder="请输入内容" v-model="form1.supplierPrivateKey"
                                        show-word-limit disabled>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="MD5私钥" prop="md5Key">
                                    <el-input type="textarea" placeholder="请输入内容" v-model="form1.md5Key" show-word-limit
                                        disabled>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-button style="float:right;" type="primary" @click="resetting">重置</el-button>
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                    <el-collapse-item title="API接口信息" name="2">
                        <el-row :gutter="10" class="mb8">
                            <el-col :span="24">
                                <el-form-item label="白名单" prop="whiteList">
                                    <!-- <el-input type="textarea" placeholder="请输入内容" v-model="form1.whiteList" show-word-limit>
                                    </el-input> -->
                                    <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
                                        style="margin-left: 5px;" @close="handleClose(tag)">
                                        {{ tag }}
                                    </el-tag>
                                    <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue"
                                        ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm"
                                        @blur="handleInputConfirm" style="width:50%;margin-left: 5px;">
                                    </el-input>
                                    <el-button v-else class="button-new-tag" size="small" @click="showInput"
                                        style="margin-left: 5px;">+
                                        新增白名单</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="指令下发接口" prop="instructSendUrl">
                                    <el-input type="textarea" placeholder="请输入指令下发接口" v-model="form1.instructSendUrl"
                                        show-word-limit>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="指令状态查询接口" prop="instructStatusSearchUrl">
                                    <el-input type="textarea" placeholder="请输入指令状态查询接口"
                                        v-model="form1.instructStatusSearchUrl" show-word-limit>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="24">
                                <el-form-item label="供应商ID" prop="postCode">
                                    <el-input type="textarea" placeholder="请输入指令状态查询接口" v-model="text2" show-word-limit>
                                    </el-input>
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                    </el-collapse-item>
                </el-collapse>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm2">确 定</el-button>
                <el-button @click="cancel2">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    listSupplier,
    updateSupplier,
    delSupplier,
    addSupplier,
    getSupplier,
    keySupplier,
    seeSupplier,
    perfetSupplier,
    stopSupplier
} from "@/api/system/supplierInfo.js";

export default {
    name: "manufacturer",
    dicts: ["sys_normal_disable"],
    data() {
        return {
            dynamicTags: [],
            inputVisible: false,
            inputValue: '',
            activeNames: ['1', '2'],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 岗位表格数据
            postList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                postCode: undefined,
                postName: undefined,
                status: undefined,
            },
            // 表单参数
            form: {},
            form1: {},
            // 表单校验
            rules: {
                supplierName: [
                    { required: true, message: "供应商名称不能为空", trigger: "blur" },
                ],
                contacts: [
                    { required: true, message: "联系人不能为空", trigger: "blur" },
                ],
                contactsPhone: [
                    { required: true, message: "联系电话不能为空", trigger: "blur" },
                ],
                civilUseStatus: [
                    { required: true, message: "民用气表不能为空", trigger: "blur" },
                ],
                industryStatus: [
                    { required: true, message: "工业气表不能为空", trigger: "blur" },
                ],
            },
            dialogTableVisible: false,
            text1: "",
            text2: "",
            text3: "",
            text4: "",
            text5: "",
            text6: "",
            infos: '',
            information: null
        };
    },
    created() {
        this.getList();
    },
    watch: {
        form1: {
            deep: true,
            handler(val) {
                this.form1 = val
            },
            immediate: true
        }
    },
    methods: {
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        // 重置密钥
        resetting() {
            keySupplier(this.infos.id).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess("重置成功");
                } else {
                    this.$message.error(res.msg);
                }

            })
            this.refreshKet()
        },
        // 启用
        startView(info) {
            this.$modal
                .confirm('是否确认启用？')
                .then(function () {
                    return startSupplier(info.id)
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("启用成功");
                })
                .catch(() => {

                });
        },
        // 停用
        closeView(info) {
            this.$modal
                .confirm('是否确认停用？')
                .then(function () {
                    return stopSupplier(info.id)
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("停用成功");
                })
                .catch(() => {

                });
        },
        /** 查询岗位列表 */
        getList() {
            this.loading = true;
            listSupplier(this.queryParams).then((res) => {
                if (res.code === 200) {
                    this.postList = res.rows;
                    this.total = res.total;
                    this.loading = false;
                } else {
                    this.$message.error(res.msg);
                    this.loading = false;
                }

            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                postId: undefined,
                postCode: undefined,
                postName: undefined,
                postSort: 0,
                status: "0",
                checkList: [],
                checkList2: [],
                remark: undefined,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();

        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.postId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "供应商-新增";
            this.$set(this.form, 'civilUseStatus', 1);
            this.$set(this.form, 'industryStatus', 1);
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const postId = row.id;
            getSupplier(postId).then((res) => {
                if (res.code === 200) {
                    this.form = res.data;
                    this.open = true;
                    this.title = "供应商-修改";
                } else {
                    this.$message.error(res.msg);
                }

            });
        },
        /** 提交按钮 */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.form.id != undefined) {
                        updateSupplier(this.form).then((res) => {
                            if (res.code === 200) {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            } else {
                                this.$message.error(res.msg);
                            }

                        });
                    } else {
                        addSupplier(this.form).then((res) => {
                            if (res.code === 200) {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            } else {
                                this.$message.error(res.msg);
                            }

                        });
                    }
                }
            });
        },
        submitForm2() {
            let param = {
                instructSendUrl: this.form1.instructSendUrl,
                instructStatusSearchUrl: this.form1.instructStatusSearchUrl,
                supplierId: this.form1.supplierId,
                whiteList: this.dynamicTags.toString(),
            }
            perfetSupplier(param).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess("完善成功");
                    this.dialogTableVisible = false
                    this.resetForm("formClear");
                } else {
                    this.$message.error(res.msg);
                }

            })
        },
        cancel2() {
            this.dialogTableVisible = false
            this.resetForm("formClear");
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const supplierName = row.supplierName;
            this.$modal
                .confirm('是否确认删除供应商"' + supplierName + '"的数据项？')
                .then(function () {
                    return delSupplier(row.id);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
        //查看私钥
        handleView(row) {
            this.dialogTableVisible = true;
            this.infos = row
            seeSupplier(row.id).then((res) => {
                if (res.code === 200) {
                    this.form1 = res.data
                    if (res.data.whiteList) {
                        this.dynamicTags = res.data.whiteList.split(',')
                    }

                } else {
                    this.$message.error(res.msg);
                }

            })
        },
        // 刷新私钥
        refreshKet() {
            seeSupplier(this.infos.id).then((res) => {
                if (res.code === 200) {
                    this.form1 = res.data
                } else {
                    this.$message.error(res.msg);
                }

            })
        },
    },
};
</script>
<style>
.el-dialog__title {
    font-size: 18px;
}
</style>

